header {
    /* 开启flex布局并让里面的内容垂直居中 */
    display: flex;
    align-items: center;
    height: 52px;
    background-color: #333333;
    font-size: 14px;

    .w {
        /* 去掉版心的白色 */
        background-color: transparent;
        
    }

    ul {
        /* 开启flex布局 */
        display: flex;
        justify-content: flex-end;
        align-items: center;

        li {

            /* 选择偶数li作为分隔的竖线 */
            &:nth-child(2n) {
                border-left: 2px solid #666666;
                height: 14px;
                margin: 0 15px;
            }

            & a:hover {
                color: #27ba8e;
            }

            a {
                color: #cdcdcd;
            }
        }
    }
}

/* 导航栏 */
nav {
    height: 132px;
    background-color: #ffffff;
    margin-bottom: 20px;
    .w {
        /* 开启flex布局 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        /* 搜索引擎SEO优化 */
        .logo {
            a {
                display: block;
                width: 200px;
                height: 132px;
                font-size: 0;
                background: url(../images/header/logo.png) no-repeat center 18px;
                background-size: contain;
            }
        }

        h1,
        ul,
        .search,
        .shoppingCart {
            display: flex;
        }

        ul {
            font-size: 16px;

            li {
                margin: 0 23px;
                border-bottom: 1px solid transparent;
                padding-bottom: 3px;

                &:hover {
                    border-color: #27ba8e;
                }

                & a:hover {
                    color: #27ba8e;
                }
            }
        }

        /* 搜索框 */
        .search {
            /* 开启flex布局让里面的内容垂直居中 */
            display: flex;
            align-items: center;
            width: 171px;
            height: 32px;
            border-bottom: 1px solid #e7e7e7;

            i {
                font-size: 18px;
            }

            input {
                padding: 5px;
                border: none;
                font-size: 12px;

                &::placeholder {
                    color: #cccccc;
                }
            }

        }

        /* 购物车模块 */
        .shoppingCart {
            i {
                font-size: 26px;
            }

            /* 修改鼠标默认样式 */
            cursor: pointer;
        }
    }


}


/* 尾部 */
footer {
    margin-top: 20px;
    background-color: #ffffff;
    /* 解决外边距塌陷 */
    border: 1px solid transparent;

    .footer_top {
        display: flex;
        justify-content: space-between;
        margin-top: 55px;
        margin-bottom: 85px;

        &>div {
            text-align: center;
            flex: 1;
            display: flex;
            flex-direction: column;
            color: #9f9f9f;
            font-size: 16px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: -10px;
                left: 310px;
                width: 1px;
                height: 200px;
                border-right: 1px solid #f2f2f2;
            }

            &>div:nth-child(2) {
                width: 100%;
                display: flex;
                justify-content: center;
                margin-top: 32px;

                span {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 91px;
                    height: 91px;
                    border: 1px solid #f1f1f1;
                    margin: 5px;
                    font-size: 14px;

                    &:hover i {
                        color: #27ba9b;
                    }

                    i {
                        font-size: 30px;

                    }
                }
            }
        }

        // 将服务热线中的div垂直放
        .rexian {
            &::before {
                content: '';
                width: 0;
                height: 0;
            }

            & div:nth-child(2) {
                flex-direction: column;

                div:nth-child(1) {
                    font-size: 24px;
                }
            }
        }

        /* 下载app模块 */
        .download_app {

            .btn_download {
                margin-top: 10px;
                width: 105px;
                height: 32px;

                button {
                    width: 105px;
                    height: 32px;
                    margin-top: 8px;
                    background-color: #27ba9b;
                    border: none;
                    color: #fff;
                }
            }
        }
    }

    /*尾部 footer-bottom */
    .footer_bottom {
        height: 347px;
        background-color: #333333;
        color: #fff;

        .w {

            .footerUp {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                height: 180px;
                border-bottom: 1px solid #434343;

                div {
                    display: flex;
                    align-items: center;
                    width: 173px;
                    height: 58px;
                    font-size: 26px;
                    cursor: pointer;
                    i{
                        font-size: 45px;
                        margin-right: 5px;
                    }
                }
            }

            .footerBottom {
                ul {
                    margin-top: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    li {
                        color: #999999;

                        &:nth-child(2n) {
                            width: 1px;
                            height: 16px;
                            border-left: 1px solid #999999;
                            margin: 0 10px;
                        }
                    }
                }

                &>div {
                    color: #999999;
                    text-align: center;
                    margin-top: 20px;
                }
            }

        }
    }

}